<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/LayUi/lib/css/layui.css">
  <script src="/vue2/js/vue.js"></script>
  <script src="/lib/jquery.min.js"></script>
  <script src="/LayUi/lib/layui.js"></script>
</head>
<body>
  <div id="app" class="layui-container" style="padding: 20px;">
    <!-- 主表信息 -->
    <div class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">订单编码</label>
        <div class="layui-input-block">
          <input type="text" v-model="formData.orderCode" 
                 class="layui-input" placeholder="系统自动生成" :disabled="true">
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">收货地址</label>
        <div class="layui-input-block">
          <textarea v-model="formData.deliveryAddress" 
                    class="layui-textarea" placeholder="详细到门牌号"></textarea>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">客户名称</label>
        <div class="layui-input-block">
          <input type="text" v-model="formData.customerName" 
                 class="layui-input" placeholder="输入客户名称">
        </div>
      </div>
    </div>

    <!-- 订单明细表格 -->
    <table class="layui-table">
      <thead>
        <tr>
          <th>产品名称</th>
          <th>数量</th>
          <th>单价（元）</th>
          <th>金额（元）</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in formData.orderItems" :key="index">
          <td><input type="text" v-model="item.product" class="layui-input"></td>
          <td><input type="number" v-model="item.quantity" class="layui-input" min="1"></td>
          <td><input type="number" v-model="item.price" class="layui-input" min="0"></td>
          <td>{{ item.quantity * item.price || 0 }}</td>
          <td>
            <button @click="removeRow(index)" class="layui-btn layui-btn-danger layui-btn-sm">
              <i class="layui-icon">&#xe640;</i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 操作区 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button @click="addRow" class="layui-btn layui-btn-normal">
          <i class="layui-icon">&#xe654;</i> 新增明细
        </button>
        <button @click="submitOrder" class="layui-btn layui-btn-primary">
          <i class="layui-icon">&#xe609;</i> 提交订单
        </button>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        formData: {
          orderCode: 'DD20250224001',  // 模拟系统生成
          deliveryAddress: '',
          customerName: '',
          orderItems: [{ product: '', quantity: 1, price: 0 }]
        }
      },
      mounted() {
        layui.use(['form', 'laydate'], () => {
          this.form = layui.form;
          this.laydate = layui.laydate;
          
          // 初始化日期选择器
          this.laydate.render({
            elem: '#orderDate',
            done: value => this.formData.orderDate = value
          });
        });
      },
      methods: {
        addRow() {
          this.formData.orderItems.push({ product: '', quantity: 1, price: 0 });
          this.$nextTick(() => this.form.render());
        },
        removeRow(index) {
          this.formData.orderItems.splice(index, 1);
        },
        submitOrder() {
          // 数据校验
          if (!this.formData.deliveryAddress.trim()) {
            layui.layer.msg('收货地址不能为空');
            return;
          }
          
          // 打印提交数据（实际替换为API调用）
          console.log('完整订单数据:', JSON.stringify(this.formData));
          layui.layer.msg('订单提交成功', { icon: 1 });
        }
      }
    });
  </script>
</body>
</html>
